<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0%;
				margin: 0%;
			}
			ul{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			.container{
				width: 1190px;
				height: 100%;
				margin: 0 auto;
			}
			.container div{
				width: 100%;
				height: 100%;
				text-align: center;
				color: #fff;
				font-size: 30px;
			}
			.aside{
				position: fixed;
				width: 40px;
				right: 20px;
				top: 300px;
				font-size: 16px;
				font-weight: 700;
				text-align: center;
			}
			.aside li{
				height: 50px;
				border-bottom: 1px solid #ddd;
			}
			.aside li a{
				color: peru;
			}
			.aside li.current{
				background-color: coral;
			}
			.aside li.current a{
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="container" id="box">
			<div class="current">爱逛好货</div>
			<div>好店主播</div>
			<div>品货特色</div>
			<div>猜你喜欢</div>
		</div>
		<ul class="aside" id="aside">
			<li class="current">
				<a href="javascript:void(0)">爱逛好货</a>
			</li>
			<li>
				<a href="javascript:void(0)">好店主播</a>
				</li>
			<li>
				<a href="javascript:void(0)">品货特色</a>
				</li>
			<li>
				<a href="javascript:void(0)">猜你喜欢</a>
				</li>
		</ul>
	</body>
	<script src="js/myAnimation2.js"></script>
	<script>
		//1.获取标签
		let box = document.getElementById('box');
		let allBoxs = box.children;
		let aside = document.getElementById('aside');
		let lis = aside.children;
		let isClick = false;
		//2.上色
		let colors = ['red','pink','purple','blue'];
		for (let i = 0; i < allBoxs.length; i++) {
			allBoxs[i].style.backgroundColor = colors[i];
		}
		//3.监听侧边栏点击
		for (let i = 0; i < lis.length; i++) {
			lis[i].index = i;
			lis[i].onclick = function() {
				isClick = true;
				for (let j = 0; j < lis.length; j++) {
					lis[j].className = '';
				}
				//4.设置当前类
				this.className = 'current';
				startAnimation(document.documentElement,{
					"scrollTop": this.index * document.body.clientHeight
				},function(){
					isClick = false;
				})
				//document.documentElement.scrollTop = this.index * document.body.clientHeight;
			}
		}
		//5.监听滚动
		window.onscroll = function() {
			if (!isClick) {
			    // 4.1 获取页面滚动的高度
			    var docScrollTop = document.documentElement.scrollTop + 20 || document.body.scrollTop+20;
			    for (var i = 0; i < lis.length; i++) {
			    if (docScrollTop > allBoxs[i].offsetTop) {
			    for (var j = 0; j < allBoxs.length; j++) {
			        lis[j].className = '';
			    }
			        lis[i].className = 'current';
			}
		}
	}
}
	</script>
</html>